<template>
  <div class="px-1 py-1 info_bgc">
    <div v-if="props.resourceData.isLong === '1'" class="flex mt-2">
      <div class="circle_icon">远用</div>
      <div class="flex-1 ml-2">
        <div class="flex justify-between mt-1">
          <div class="w-1/3 font-semibold">检查项目</div>
          <div class="w-1/3 font-semibold">右眼（OD）</div>
          <div class="w-1/3 font-semibold">左眼（OS）</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">球镜（Sph）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongSph }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongSph }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">柱镜（Cyl）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongCyl }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongCyl }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">轴位（Axis）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongAxis }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongAxis }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">视力（VA）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongVa }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongVa }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">下加光(ADD)</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongAdd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongAdd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">瞳距（PD）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongRpd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongRpd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">棱镜</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongPd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongPd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">瞳高（PH）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odLongPh }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osLongPh }}</div>
        </div>
        <div class="flex justify-between mt-1">
          <div class="w-1/3">
            <div class="font-semibold">ADD</div>
            <div>{{ props.resourceData?.globalAdd }}</div>
          </div>
          <div class="w-1/3 text-center">
            <div class="font-semibold">PD</div>
            <div>{{ props.resourceData?.longPd }}</div>
          </div>
          <div class="w-1/3 text-center">
            <div class="font-semibold">WD</div>
            <div>{{ props.resourceData?.longWd }}</div>
          </div>
        </div>
      </div>
    </div>
    <a-divider v-if="props.resourceData.isShort === '1'" class="my-4" />
    <div v-if="props.resourceData.isShort === '1'" class="flex">
      <div class="circle_icon short_icon">近用</div>
      <div class="flex-1 ml-2">
        <div class="flex justify-between mt-1">
          <div class="w-1/3 font-semibold">检查项目</div>
          <div class="w-1/3 font-semibold">右眼（OD）</div>
          <div class="w-1/3 font-semibold">左眼（OS）</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">球镜（Sph）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortSph }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortSph }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">柱镜（Cyl）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortCyl }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortCyl }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">轴位（Axis）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortAxis }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortAxis }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">视力（VA）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortVa }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortVa }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">下加光（ADD）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortAdd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortAdd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">瞳距（PD）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortRpd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortRpd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">棱镜</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortPd }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortPd }}</div>
        </div>
        <div class="flex flex-1 justify-between mt-1">
          <div class="w-1/3">瞳高（PH）</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.odShortPh }}</div>
          <div class="w-1/3 text-center">{{ props.resourceData?.osShortPh }}</div>
        </div>
        <div class="flex justify-between mt-1">
          <div class="w-1/3">
            <div class="font-semibold">ADD</div>
            <div>{{ props.resourceData?.globalAdd }}</div>
          </div>
          <div class="w-1/3 text-center">
            <div class="font-semibold">PD</div>
            <div>{{ props.resourceData?.shortPd }}</div>
          </div>
          <div class="w-1/3 text-center">
            <div class="font-semibold">WD</div>
            <div>{{ props.resourceData?.shortWd }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  resourceData: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="less" scoped>
.info_bgc {
  background-color: #f2f2f2;
}
.circle_icon {
  display: flex;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  background-color: #4040d1;
  border-radius: 50%;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.short_icon {
  background-color: #789c42 !important;
}
</style>
